<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理界面</title>
    <link rel="stylesheet" href="css/pcindex.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">

</head>
<body>
<div class="managerTitle">"最美毕业季"后台管理系统</div>
<div class='container-fluid '>
    <div class='tabbable tabs-left TabContainer'>
        <!--选项卡：通过BS的类来控制选项卡的样式-->
        <ul id="pageJumpButton" class='nav nav-tabs nav-stacked navTabs navUl'>
            <li class='active'><a href='#tab1' data-toggle='tab'>报名信息</a></li>
            <li><a href='#tab2' data-toggle='tab'>已通过</a></li>
            <li><a href='#tab3' data-toggle='tab'>已屏蔽</a></li>
        </ul>

        <!--选项卡的内容定义 -->
        <div class='tab-content tabsContent'>
            <div class="timeRank clearfix">
                <input type="button" class="rank" value="票数">
                <input type="button" class="rankTime" value="时间">
            </div>
            <div class='tab-pane active' id='tab1'>
                <!--<div class="Users clearfix">-->

                <!--<div class="mainInf clearfix">-->
                <!--<div class="userInf clearfix">-->
                <!--<div class="userName clearfix">-->
                <!--<strong>NO. <span id="num"></span></strong>-->
                <!--<span id="name"></span>-->
                <!--<span id="vote"></span>-->
                <!--</div>-->
                <!--<span id="time"></span>-->
                <!--</div>-->
                <!--<p id="introduce"></p>-->
                <!--<div class="UserPicture clearfix">-->

                <!--</div>-->
                <!--<div class="operation clearfix">-->
                <!--<input type="button" value="通过" id="pass">-->
                <!--<input type="button" value="屏蔽" id="shield">-->
                <!--</div>-->
                <!--</div>-->

                <!--</div>-->
            </div>
            <div class='tab-pane' id='tab2'>

            </div>
            <div class='tab-pane' id='tab3'>

            </div>
            <div class="page">
                <input type="button" value="上一页" id="pre">
                <span id="underPageNum"></span>
                <input type="button" value="下一页" id="next">
            </div>
        </div>
    </div>

</div>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script>
    var currentPageNum=1;
    var currentTabNum=2;
    //初始化加载页面
    $(function () {
        rankWay();
        $('.rankTime').trigger("click");
        $("#pre").attr("disabled","disabled");
    });

    //页面跳转
    $("#pageJumpButton>li").click(function () {
        var index=$(this).index();
        switch (index)
        {
            case 0: currentTabNum=2;appendTabsContent(2,1,0,0,-1,-1,-1,-1);break;
            case 1: currentTabNum=1;appendTabsContent(1,1,0,0,-1,-1,-1,-1);break;
            case 2: currentTabNum=0;appendTabsContent(0,1,0,0,-1,-1,-1,-1);break;
        }
    });

    //  票数排名
    function rankWay() {
        var rank_control = 0; //按票数排名0:灰色底；1：蓝色底
        var time_control = 0; //按时间排名0:灰色底；1：蓝色底
        $('.rank').on("click", function (e) {
            if (rank_control === 0) {
                rank_control = 1;
                appendTabsContent(currentTabNum,1,1,0,-1,-1,-1,-1);
                $(this).attr("style", "background:#58a4c5");
                $(this).attr("value", "已按票数排名");
                $('.rankTime').attr("style", "background:#ddd");
                $('.rankTime').attr("value", "时间");
                time_control = 0;
            } else if (rank_control === 1) {
                $(this).attr("style", "background:#ddd");
                $(this).attr("value", "票数");
                rank_control = 0;
                time_control = 1;
                $('.rankTime').attr("style", "background:#58a4c5");
                $('.rankTime').attr("value", "已按时间排名");
            }
        });
        $('.rankTime').on("click", function (e) {
            if (time_control === 0) {
                time_control = 1;
                appendTabsContent(currentTabNum,1,0,0,-1,-1,-1,-1);
                $(this).attr("style", "background:#58a4c5");
                $(this).attr("value", "已按时间排名");
                rank_control = 0;
                $('.rank').attr("style", "background:#ddd");
                $('.rank').attr("value", "票数");

            } else if (time_control === 1) {
                $(this).attr("style", "background:#ddd");
                $(this).attr("value", "票数");
                time_control = 0;
                rank_control = 1;
                $('.rank').attr("style", "background:#58a4c5");
                $('.rank').attr("value", "已按时间排名");
            }
        });
    }


    //点击已通过
    var pass_control = 0; //0:灰色底；1：蓝色底
    //点击已屏蔽
    var shield_control = 0; //0:灰色底；1：蓝色底
    //ajax加载
    function appendTabsContent(tabNum,pageNum,sortWay,ifSearch,thisID,lastID,operation,result) {
        $.post("/pageHome.do", {reqTabNum:tabNum,reqPageNum:pageNum,reqSortWay:sortWay,reqIfSearch:ifSearch,reqThisID:thisID,reqLastID:lastID,reqOperation:operation,reqResult:result},function (data) {
            switch (tabNum)
            {
                case 2:tabNum=1;break;
                case 1:tabNum=2;break;
                case 0:tabNum=3;break;
            }
            var tabPane = $("#tab"+tabNum);
            $("#tab1").empty();
            $("#tab2").empty();
            $("#tab3").empty();
            for (var x=0;x<data.length-1;x++) {
                var jsonData = data[x];
                var Users = $('<div class="Users clearfix"></div>');
                var mainInf = $('<div class="mainInf clearfix"></div>');
                var userInf = $('<div class="userInf clearfix">\n' +
                    '                        <div class="userName clearfix">\n' +
                    '                            <strong>ID-<span id="num' + x + '">' + jsonData.num + '</span></strong>\n' +
                    '                            <span id="name' + x + '">' + jsonData.name + '</span>\n' +
                    '                            <span class="vote" id="vote' + x + '">' + jsonData.vote + '</span>\n' +
                    '                        </div>\n' +
                    '                        <span id="time' + x + '">' + jsonData.time + '</span>\n' +
                    '                        <span id="No' + x + '">' + "NO."+jsonData.rank + '</span>\n' +
                    '                    </div>');
                var introduce = $(' <p id="introduce' + x + '" class="introduce">' + jsonData.introduce + '</p>');

                var UserPicture = $('<div class="UserPicture clearfix"></div>');
                for (var i = 0; i < jsonData.pic.length; i++) {
                    var imgNode = $("<img src=\"\" alt=\"\" width=\"14%\" height=\"100%\">");
                    imgNode.attr("src", jsonData.pic[i].img);
                    $(UserPicture).append(imgNode);
                }

                var operation = $('<div class="operation clearfix">\n' +
                    '<input type="button" value="通过" id="pass' + x + '">\n' +
                    '<input type="button" value="屏蔽" id="shield' + x + '">\n' +
                    '</div>');


                Users.append(mainInf);
                mainInf.append(userInf);
                mainInf.append(introduce);
                mainInf.append(UserPicture);
                mainInf.append(operation);
                tabPane.append(Users);


                //点击已通过
                pass_control = 0; //0:灰色底；1：蓝色底
                //点击已屏蔽
                shield_control = 0; //0:灰色底；1：蓝色底
                var passButton=operation.children().eq(0);
                var shieldButton=operation.children().eq(1);

                if (jsonData.passOrNot==="yes") {

                    pass_control = 1;
                    passButton.css("background", "#58a4c5");
                    passButton.attr("value", "已通过");
                    shieldButton.attr("disabled", "disabled");
                }


                if (jsonData.shieldOrNot==="yes") {
                    shield_control = 1;
                    shieldButton.css("background", "#58a4c5");
                    shieldButton.attr("value", "已屏蔽");
                    passButton.attr("disabled", "disabled");
                }

                $("#pass"+x).click(function () {

                    var thisItemIndex=$(this).parents().parents().parents().index();
                    if ($(this).css("background")==="rgb(88, 164, 197)")
                        pass_control=1;
                    if (pass_control === 0) {
                        pass_control = 1;
                        $(this).css("background", "#58a4c5");
                        $(this).attr("value", "已通过");
                        $(this).next().attr("disabled","disabled");

                        if(data.length-1===1) {

                            appendTabsContent(currentTabNum, currentPageNum, sortWay, 1, data[thisItemIndex].num, -1, 0, 1);
                        }
                        else if(thisItemIndex+1===data.length-1) {
                            appendTabsContent(currentTabNum, currentPageNum, sortWay, 1, data[thisItemIndex].num, data[thisItemIndex-1].num, 0, 1);
                        }
                        else
                            appendTabsContent(currentTabNum, currentPageNum, sortWay, 1, data[thisItemIndex].num, data[thisItemIndex+1].num, 0, 1);


                    } else if (pass_control === 1) {
                        $(this).css("background", "#ddd");
                        $(this).attr("value", "通过");
                        if ($(this).next().attr("disabled")==="disabled")
                            $(this).next().removeAttr("disabled");
                        pass_control = 0;
                        if(data.length-1===1)
                            appendTabsContent(currentTabNum, currentPageNum, sortWay, 1,  data[thisItemIndex].num, -1, 0, 0);
                        else if(thisItemIndex+1===data.length-1) {
                            appendTabsContent(currentTabNum, currentPageNum, sortWay, 1, data[thisItemIndex].num, data[thisItemIndex-1].num, 0, 0);
                        }
                        else
                            appendTabsContent(currentTabNum, currentPageNum, sortWay, 1, data[thisItemIndex].num, data[thisItemIndex+1].num, 0, 0);

                    }


                });

                $("#shield"+x).click(function () {

                    var thisItemIndex=$(this).parents().parents().parents().index();
                    if ($(this).css("background")==="rgb(88, 164, 197)")
                        shield_control = 1;
                    if (shield_control === 0) {
                        shield_control = 1;
                        $(this).css("background", "#58a4c5");
                        $(this).attr("value", "已屏蔽");
                        $(this).prev().attr("disabled","disabled");
                        if(data.length-1===1) {

                            appendTabsContent(currentTabNum, currentPageNum, sortWay, 1, data[thisItemIndex].num, -1, 1, 1);
                        }
                        else if(thisItemIndex+1===data.length-1) {
                            appendTabsContent(currentTabNum, currentPageNum, sortWay, 1, data[thisItemIndex].num, data[thisItemIndex-1].num, 1, 1);
                        }
                        else
                            appendTabsContent(currentTabNum, currentPageNum, sortWay, 1, data[thisItemIndex].num, data[thisItemIndex+1].num, 1, 1);
                    } else if (shield_control === 1) {
                        $(this).css("background", "#ddd");
                        $(this).attr("value", "屏蔽");
                        if ($(this).prev().attr("disabled")==="disabled")
                            $(this).prev().removeAttr("disabled");
                        shield_control = 0;
                        if(data.length-1===1) {

                            appendTabsContent(currentTabNum, currentPageNum, sortWay, 1, data[thisItemIndex].num, -1, 1, 0);
                        }
                        else if(thisItemIndex+1===data.length-1) {
                            appendTabsContent(currentTabNum, currentPageNum, sortWay, 1, data[thisItemIndex].num, data[thisItemIndex-1].num, 1, 0);
                        }
                        else
                            appendTabsContent(currentTabNum, currentPageNum, sortWay, 1, data[thisItemIndex].num, data[thisItemIndex+1].num, 1, 0);
                    }

                });

            }


            //控制上下页按钮
            var length=data.length;
            currentPageNum=data[length-1].page;

            $("#underPageNum").text(currentPageNum);
            if (data[length-1].ifEndPage===true)
                $("#next").attr("disabled", "disabled");
            else{
                if ($("#next").attr("disabled")==="disabled")
                    $("#next").removeAttr("disabled");
            }
            if(currentPageNum===1)
                $("#pre").attr("disabled", "disabled");
            else{
                if ($("#pre").attr("disabled")==="disabled")
                    $("#pre").removeAttr("disabled");
            }
        });
    }

    //上下翻页
    $("#pre").on("click",function () {
        var sortWay;
        if($(".rankTime").attr("value")==="已按时间排名")
            sortWay=0;
        else
            sortWay=1;
        appendTabsContent(currentTabNum,currentPageNum-1,sortWay,0,-1,-1,-1,-1);
    })

    $("#next").on("click",function () {
        var sortWay;
        if($(".rankTime").attr("value")==="已按时间排名")
            sortWay=0;
        else
            sortWay=1;
        appendTabsContent(currentTabNum,currentPageNum+1,sortWay,0,-1,-1,-1,-1);
    })

</script>
</body>
</html>